iT邦幫忙

2022 iThome 鐵人賽

DAY 1
0
自我挑戰組

向網頁施點魔法粉 framer-motion 系列 第 1

#01 Who & Why framer-motion ?

  • 分享至 

  • xImage
  •  

目錄

  1. 從坐著到行動
  2. 選擇動畫相關為主題
  3. 什麼是 framer motion ?
  4. 為什麼選 framer motion ?
  5. 先備知識
  6. 規劃

從坐著到行動

Hi , 我是 Rosa Hong,這是我第一次參加鐵人賽,報名時想了很久,決定先報自我挑戰組嘗試看看。去年我開始自學前端技術,很多大神的鐵人賽的文章一直都是我的隱藏老師,在收穫滿滿之餘,也希望自己能有一天能成為鐵人賽的參加者,今年下定決心來報名。

期許自己參加不只是記錄學習,也在寫文方面能夠進步,不只是吸收者,而是成為知識的輸出者。

選擇動畫相關為主題

參賽前有想過其他主題,像是我很想學習的 Vue 、TypeScript 以及 P5.js 等等,太想學習的實在太多,考慮自己沒辦法在短期內邊學習之際又有架構的產出一系列文章,尤其自己的學習習慣很容易糾結在某個點專研,30 天反而會變成 「我只是想參加完」這樣的心態打流水仗,於是選擇預先規劃較完整的動畫為主題。

動畫一直是我覺得最為神秘的技術,能達到動畫的手法可能有 :

  • CSS Animation
  • CSS Transition
  • SVG 動畫
  • WebGL 或 Canvas
  • 一張 GIF 圖片...
  • ...

身為新手,也想做出網路上各種漂亮的網頁?,但 :
我的新手學習歷程
(特地製作了一張嘲諷自己)

當我開開心心做出一個具有功能的網頁,一直覺得好像少了什麼。同時學習框架與 JS 基礎還有一堆生態圈衍生 library 的要學,我的大腦已經超載 ,要我再加上精雕細琢的動畫,皮諾可請直接電死我。

當然 CSS Animation 基礎還是要會,這是動畫的根基。但動畫難的不是它的很難學難懂,而是要大費周章的時間處理。不能否認一項藝術創作的背後需要花費的心力與時間,所以人類才會使用工具幫助自己快速達成目標,在現代開發則透過各種套件來快速達到動畫效果,例如 : GASP 、Three.js 等等,再進一步搭配上各種框架與生態圈都衍生出一系列處理動畫的 library 。

由於前端御三家中 React 是我第一個學習的,所以我都會以 React 生態系作為出發點。

在 React Animation 相關的 library 比較多星的有 :

截至 2022 年 9 月三者下載量數據 :

framer motion 可以說是後起之秀。我第一次知道 framer motion 是從 Takuya Matsuyama 的影片 ,順便認識了 Chakra UI ,讓我對這兩個工具充滿好奇。

那 framer motion 究竟為什麼可以這麼快速竄起呢 ?

什麼是 framer motion ?

framer motion 是 Framer 跟 motion API 所組合而成,其簡介是 :

  • Framer : 快速打造世界級網頁的平台設計工具,一鍵設計到發布。
  • motion API : 聲明式 (declarative) 動畫,提供更好維護與易讀的程式碼。

就整體來說主打 迅速跟簡單上手

再看看 motion API 官方特色,基本上應有盡有 :

  • motionValue : 客製化動畫值
  • useSpring 具有 Spring Animation
  • Unmount 動畫
  • 支援 CSS 變數
  • 支援 SSR
  • 支援 TypeScript
  • 與自家 Framer 設計工具整合

在開發應用上也可以到 官方的範例 看能做到哪些效果,不只元素區塊的動畫,也包含 SVG 與 3D,不過我最常看見的是 Unmount 動畫應用在頁面轉場,轉場多重要呢 ? 可以參考今年的 Google I/O 釋出 Page Transitions 新特色

在設計工具方面,Framer 跟 Figma 長的很像,官方也有推出 Figma + Framer 的整合工具,也就是可以在 Figma 設計到 Framer 發布/轉成 html 或展示原型。

framer motion 的崛起,我想也要歸功於勤奮更新與越來越完善的 API ,另外令我最好奇的是 官方 beta 的功能 ,就是使用 import 就能載入 framer 設計好的元件,並且可以發布到 npm,在未來或許動畫再也不是開發者的噩夢之一了。

為什麼選 framer motion ?

我想再次強調 新手友善 的問題

  • 只要把元件轉成 <motion.div> 就可以開始做動畫 ,基本上會有不錯的 Spring 動畫
  • 清楚易懂的文件與範例
  • 簡化複雜的物理動畫設定,包含阻尼、摩擦係數等透過這些細微設定讓動畫更生動

身為新手而言,降低接觸門檻是第一步,如果連認識都很困難了,更不用談想繼續學習的動力。新手肯定遇過這個難題 : 一開始要學 React 、 Vue 還是 Angular ? 我會說,哪個試過你覺得最想繼續學就去學那個吧。

先備知識

並不會特別講 React 基本概念,以下是估計會用到知識部分

規劃

目前劃分幾個主題 :

  • 入門和弦 : 基本的 motion API 使用
  • 與 Hooks 共舞 : 搭配各種 Hooks 做更客製化的動畫
  • solo 單曲 : 實作幾個常見的網頁元件動畫,例如 : 下拉式選單
  • 交響樂章 : 使用 Figma + Framer 設計到開發一個網頁,組合前面所做的元件

接下來一個月請多指教啦 :D


下一篇
#02 Dancing with Animation and Transition
系列文
向網頁施點魔法粉 framer-motion 15
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言